<template>
  <div class="body">
    <!-- 整体布局开始 -->
    <div class="postMain">
      <!-- 标题开始 -->
      <div style="margin-left: 90px; margin-right: 50px; color: #454d49">
        <h1>{{ post.title }}</h1>
      </div>
      <!-- 标题 结束-->
      <!-- 时间头像和昵称啥的开始 -->
      <div class="head sticky-header">
        <div style="margin-left: 20px;"></div>
        <el-avatar :size="70" :src="post.head"></el-avatar>
        <div
          style="
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 550;
            color: #ed6a12;
          "
        >
          {{ post.nickName }}
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            margin-left: 350px;
            color: #9EA0A3;
          "
        >
          发布于{{ post.postingTime }}
        </div>
      </div>
      <!-- 头部，包括时间头像和昵称啥的结束 -->
      <!-- 显示富文本内容，根据百度查询，这个 class="ql-editor"必须要加上-->
      <div class="ql-editor" id="content" v-html="post.content"></div>
      <el-divider></el-divider>
      <!-- 主体的回复开始 -->
      <div style="width: 580px; margin-left: 130px">
        <el-input
          type="textarea"
          resize="none"
          :rows="6"
          placeholder="快来回复吧"
          maxlength="200"
          show-word-limit
          v-model="applyPost"
        >
        </el-input>
      </div>
      <div>
        <br />
        <el-button
          :disabled="applyPost == '' ? true : false"
          @click="applyPosta"
          type="info"
          style="margin-left: 600px"
          >回复</el-button
        >
      </div>
      <el-divider></el-divider>
      <!-- 主体的回复框结束 -->
      <!-- 显示一级回复开始 -->
      <el-empty
        v-if="applyOne.length == 0 ? true : false"
        description="暂无回复,快来抢沙发吧！"
      ></el-empty>
      <div
        v-if="applyOne.length == 0 ? false : true"
        style="width: 70%; border: 0px solid red; margin-left: 160px"
      >
        <div v-for="(item, index) in applyOne" :key="index">
          <!-- 头像昵称开始 -->
          <div style="display: flex">
            <el-avatar :size="30" :src="item.head"></el-avatar>
            <div
              style="
                display: flex;
                align-items: center;
                font-weight: 550;
                color: #F88214;
              "
            >
              {{ item.nickName }}
            </div>
          </div>
          <!-- 头像昵称结束 -->
          <!-- 评论内容开始 -->
          <div style="width: 80%; margin-left: 50px; color: #4e5351">
            {{ item.content }}
          </div>
          <!-- 评论内容结束 -->
          <br />
          <div>
            <span style="margin-left: 55px; font-size: 13px; color: grey">{{
              item.applyTime
            }}</span
            ><el-link
              @click="openDrawer(item.id, item.postId, item.userId)"
              style="margin-left: 240px"
              ><span style="font-size: 10px"
                >共<span style="color: #ed6a12">{{ item.totalApply }}</span
                >条回复，点击查看回复</span
              ></el-link
            >
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 分割线 -->
        </div>
      </div>
      <!-- 显示一级回复结束 -->
      <!-- 一级分页开始，默认就是时间倒序，回复统一暂时不用考虑其他条件 -->
      <br />
      <div
        v-if="applyOne.length == 0 ? false : true"
        class="block"
        style="margin-left: 200px"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[5, 21, 27, 36]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 一级评论分页结束 -->
      <br /><br /><br /><br />
    </div>
    <!-- 二级评论查看开始 -->
    <el-drawer
      size="35%"
      :visible.sync="drawer"
      direction="rtl"
      :with-header="false"
      :before-close="handleClose"
    >
      <!-- 二级评论主体的回复开始 -->
      <div style="width: 400px; margin-top: 10px; margin-left: 20px">
        <el-input
          type="textarea"
          resize="none"
          :rows="3"
          placeholder="快来回复吧"
          maxlength="200"
          show-word-limit
          v-model="applyContent"
        >
        </el-input>
      </div>
      <div>
        <br />
        <el-button
          @click="applyPa"
          type="info"
          size="mini"
          style="margin-left: 360px"
          :disabled="applyContent == '' ? true : false"
          >回复</el-button
        >
      </div>
      <el-divider></el-divider>
      <!-- 二级评论回复的的回复框结束 -->
      <!-- 列举所有的二级评论开始 -->
      <el-empty
        v-if="applyTwo.length == 0 ? true : false"
        description="暂无回复,快来抢沙发吧！"
      ></el-empty>
      <div v-if="applyTwo.length == 0 ? false : true">
        <div
          style="margin-left: 20px; margin-right: 20px"
          v-for="(item, index) in applyTwo"
          :key="index"
        >
          <!-- 头像昵称开始 -->
          <div style="display: flex">
            <el-avatar :size="20" :src="item.head"></el-avatar>
            <div style="display: flex; align-items: center; font-weight: 520">
              <span style="color: #F88214">{{ item.nickName }}</span
              ><span style="color: grey;">@</span><span style="color: #ed6a12">{{ item.parentName }}</span>
            </div>
          </div>
          <!-- 头像昵称结束 -->
          <!-- 评论内容开始 -->
          <br>
          <div
            style="
              width: 75%;
              margin-left: 50px;
              color: #4e5351;
              font-size: 13px;
            "
          >
            {{ item.content }}
          </div>
          <!-- 评论内容结束 -->
          <br />
          <div>
            <span style="margin-left: 55px; font-size: 13px; color: grey">{{
              item.applyTime
            }}</span
            ><span>
              <el-link
                style="font-size: 13px; margin-left: 200px"
                @click="showApplyTwo(item.id)"
                >回复</el-link
              >
            </span>
          </div>
          <!-- 二级评论每一个评论的回复框开始 -->
          <div v-if="showApplyOne(item.id)">
            <!--注意这里的函数名称跟上面有啥不同-->
            <div style="width: 400px; margin-top: 10px; margin-left: 20px">
              <el-input
                type="textarea"
                resize="none"
                :rows="3"
                placeholder="快来回复吧"
                maxlength="200"
                show-word-limit
                v-model="applyCon"
              >
              </el-input>
            </div>
            <div>
              <br />
              <el-button
                :disabled="applyCon == '' ? true : false"
                @click="applyPr(item.userId)"
                type="info"
                size="mini"
                style="margin-left: 360px"
                >回复</el-button
              >
            </div>
          </div>
          <!-- 二级评论每一个评论的回复框结束 -->
          <el-divider></el-divider>
        </div>
      </div>
      <!-- 列举所有的二级评论结束 -->
    </el-drawer>
    <!-- 二级评论查看结束 -->
    <!-- 整体布局结束 -->
  </div>
</template>
    
<script>
import { getOnePost } from "../../api/postMg";
import { getFirst, getSecond, addApply } from "../../api/applyMG";
export default {
  name: "PostDetails",
  data() {
    return {
      showApply: false, //二级评论回复框默认关闭
      showApplyId: "", //方便管理哪个回复框打开关闭
      applyPost: "", //一级评论回复框绑定的参数
      applyContent: "", //二级评论主体回复框绑定的参数
      applyCon: "", //二级评论各个评论分别的回复框绑定的参数
      page: {
        currentPage: 1,
        pageSize: 5,
        total: 100,
      },
      drawer: false, //控制抽屉时打开还是关闭,
      applyId: "", //点开某个一级评论后这里的值，关闭后这里记得设置为空字符串
      applyParentId: "", //点开某个一级评论后这里的值,上面一个数据是评论id，这里是评论人的id，关闭后这里记得设置为空字符串
      postId: "", //从列表界面传过来的的一个id，用这个去查对应的文章内容和一级评论和二级评论
      post: {},
      // 一级评论
      applyOne: [],
      // 二级评论
      applyTwo: [],
    };
  },

  methods: {
    showApplyOne(id) {
      //二级评论的id
      //这里是点击二级评论下各自的上面那个回复按键，点击谁的就打开下面的回复框，点击相同的的回复就关闭、
      if (this.showApply == false) {
        return false;
      }
      if (this.showApply == true && this.showApplyId != id) {
        return false;
      }
      return true;
    },
    showApplyTwo(id) {
      //这个函数是展开二级评论各自评论下的回复框
      //二级评论的id
      this.applyCon = "";
      if (this.showApplyId == id) {
        this.showApply = !this.showApply;
        return;
      }
      this.showApplyId = id;
      this.showApply = true;
    },
    async applyPa() {
      //这里时展开一级评论的回复即二级评论，不过是最上方的那个回复框
      await addApply({
        postId: this.postId,
        userId: localStorage.getItem("userId"),
        content: this.applyContent,
        parentId: this.applyParentId,
        parentApply: this.applyId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.applyContent = "";
          this.getApplySecond();
          this.getApplyFirst();
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    async applyPr(userId) {
      //这里时展开一级评论的回复即二级评论，不过是每一个二级评论都能点开的回复框
      await addApply({
        postId: this.postId,
        userId: localStorage.getItem("userId"),
        content: this.applyCon,
        parentId: userId,
        parentApply: this.applyId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.applyCon = "";
          (this.showApplyId = ""), (this.showApply = false);
          this.getApplySecond();
          this.getApplyFirst();
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    async applyPosta() {
      //这是回复帖子的回复事件就是一级评论
      await addApply({
        postId: this.postId,
        userId: localStorage.getItem("userId"),
        content: this.applyPost,
      }).then((res) => {
        if (res.data.code == 200) {
          this.applyPost = "";
          this.getApplyFirst();
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleClose(done) {
      //这里是打开抽屉页后关闭的地方，会清空二级评论数组，并且如果点击其他非抽屉页也会关闭
      this.applyTwo = [];
      this.applyId = ""; //关闭二级评论先把一级评论id赋为空字符串
      this.applyParentId = ""; //关闭二级评论先把一级评论的人的id删除
      this.applyContent = this.applyCon = ""; //关闭右边的弹出框也会清空里面的回复框的文本信息
      done(); //这是一个事件会自动把绑定的控制开关的参数变为false
    },
    openDrawer(id, postId, parentId) {
      //之所以传两个参数是因为前面的id时定位这个评论的所有回复，后面这个id确保这些二级评论也在这个帖子下面
      //这个地方打开右边的抽屉，就是然后去后端查询这个评论的的二级评论。
      console.log(id, postId);
      this.applyId = id; //打开二级评论先把一级评论id赋值，关闭记得删除
      this.applyParentId = parentId; //打开二级评论先把一级评论的人的id赋值，关闭记得删除
      this.drawer = true;
      //然后调用方法请求后端获取二级评论
      this.getApplySecond();
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getApplyFirst();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getApplyFirst();
    },
    async getPost() {
      // 根据this.postId获取这篇文章的内容信息，其实就是列表界面获取到的那些数据，只不过有评论
      await getOnePost(this.postId).then((res) => {
        if (res.data.code == 200) {
          this.post = res.data.data;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    async getApplyFirst() {
      //获取这个帖子的所有一级评论
      await getFirst(
        this.postId,
        this.page.currentPage,
        this.page.pageSize
      ).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.page.total = res.data.data.total;
          this.applyOne = res.data.data.list;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    async getApplySecond() {
      await getSecond(this.postId, this.applyId).then((res) => {
        if (res.data.code == 200) {
          this.applyTwo = res.data.data;
        } else {
          this.$message.error(res.data.code + "::" + this.data.msg);
        }
      });
    },
  },
  mounted() {
    //获浏览器url字符串
    var currentURL = window.location.href;
    //定义为url类型
    var urlObj = new URL(currentURL);
    // 使用URLSearchParams接口获取查询参数
    var params = new URLSearchParams(urlObj.search);
    // 提取post参数的值,获取加密的postId，
    var postValue = params.get("post");
    //然后解密
    this.postId = decodeURIComponent(escape(window.atob(postValue)));
    // console.log(this.postId);
    //获取这篇文章的具体内容和所有一级评论，当然还是要分页的
    this.getPost();
    this.getApplyFirst();
  },
};
</script>

<style scoped>
.body {
  display: flex;
  justify-content: center;
  background-color: #f5f7fa;
}
.postMain {
  width: 65%;
}
.head {
  display: flex;
  margin-left: 60px;
  padding-bottom: 20px;
  padding-top: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* 更强烈的凸出效果 */
}
/* 这个富文本默认下方有空白，我们设置成auto可以取消掉 */
.ql-editor {
  height: auto;
}

#content {
  text-indent: 2em;
  width: 80%;
  margin: 20px auto;
}
</style>
